<template>
	<view class="my-layout">
		<view class="user-info">
			<image class="user-img" src="/static/mine/tx.png" mode="widthFix"></image>
			<view class="user-vip">
				<view class="vip-top">
					<text class="user-tel">13686888888</text>
					<image class="vip-type" src="/static/mine/vip.png" mode="widthFix"></image>
				</view>
				<view class="tgm">
					<text>推广码: mzj453</text>
					<image class="tgm-copy" src="/static/mine/copy.png" mode="widthFix" @click="copyTgm"></image>
				</view>
			</view>
		</view>
		<view class="my-earnings">
			<view class="earnings-info">
				<view class="earnings-top">
					<text class="top-text">金额</text>
					<view class="get-cash" @tap='getCash'>
						<view class="cash-left">
							<image class="cash-icon" src="/static/mine/cash-small.png" mode="widthFix"></image>
							<text>提现</text>
						</view>
						<image class="arror-right" src="/static/mine/arrow-white.png" mode="widthFix"></image>
					</view>
				</view>
				<view class="cash-num">199,236,576.00</view>
				<view class="earnings-bottom">
					<view class="btm-item">
						<view class="item-text">购物佣金</view>
						<text class="item-num">4,546,889,0.00</text>
					</view>
					<view class="btm-item">
						<view class="item-text">代理佣金</view>
						<text class="item-num">4,546,889,0.00</text>
					</view>
				</view>
			</view>
			<view class="fun-list">
				<view class="fun-item" @tap='gofun(0)'>
					<image class="fun-icon" src="/static/mine/earnings.png" mode="widthFix"></image>
					<view class="fun-name">账户明细</view>
				</view>
				<view class="fun-item" @tap='gofun(1)'>
					<image class="fun-icon" src="/static/mine/welfare.png" mode="widthFix"></image>
					<view class="fun-name">会员福利</view>
				</view>
				<view class="fun-item" @tap='gofun(2)'>
					<image class="fun-icon" src="/static/mine/invitefirend.png" mode="widthFix"></image>
					<view class="fun-name">邀请好友</view>
				</view>
				<view class="fun-item" @tap='gofun(3)'>
					<image class="fun-icon" src="/static/mine/team.png" mode="widthFix"></image>
					<view class="fun-name">我的团队</view>
				</view>
			</view>
		</view>
		<view class="set-list">
			<view class="set-item" @tap='goSet(1)'>
				<view class="item-left">
					<image class="set-icon" src="/static/mine/msgcenter.png" mode="widthFix"></image>
					<text class="set-name">消息中心</text>
					<view class="active-flag"></view>
				</view>
				<view class="">
					<text class="msg-num">您有6条未读信息</text>
					<image class="item-right" src="/static/mine/arrow-black.png"></image>
				</view>
			</view>
			<view class="set-item" @tap='goSet(2)'>
				<view class="item-left">
					<image class="set-icon" src="/static/mine/userinfo.png" mode="widthFix"></image>
					<text class="set-name">个人信息</text>
				</view>
				<image class="item-right" src="/static/mine/arrow-black.png"></image>
			</view>
			<view class="set-item" @tap='goSet(3)'>
				<view class="item-left">
					<image class="set-icon" src="/static/mine/address.png" mode="widthFix"></image>
					<text class="set-name">地址管理</text>
				</view>
				<image class="item-right" src="/static/mine/arrow-black.png"></image>
			</view>
			<view class="set-item" @tap='goSet(4)'>
				<view class="item-left">
					<image class="set-icon" src="/static/mine/mykf.png" mode="widthFix"></image>
					<text class="set-name">联系客服</text>
				</view>
				<image class="item-right" src="/static/mine/arrow-black.png"></image>
			</view>
			<view class="set-item" @tap='goSet(5)'>
				<view class="item-left">
					<image class="set-icon" src="/static/mine/set.png" mode="widthFix"></image>
					<text class="set-name">设置</text>
				</view>
				<image class="item-right" src="/static/mine/arrow-black.png"></image>
			</view>
		</view>
		<view class="out-btn">
			<u-button type="warning">安全退出</u-button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				funlist:{
					0:'/pages/mine/accountDetails/accountDetails',
					1:'/pages/mine/vipWelfare/vipWelfare',
					2:'/pages/mine/inviteFirend/inviteFirend',
					3:'/pages/mine/myTeam/myTeam'
				},
				setlist:{
					1:'/pages/mine/msgCenter/msgCenter',
					2:'/pages/mine/userInfo/userInfo',
					3:'/pages/mine/address/address',
					4:'/pages/kefu/kefu',
					5:'/pages/mine/setInfo/setInfo'
				}
			};
		},
		methods:{
			// 复制推广码
			copyTgm(){
				console.log('复制成功')
			},
			// 提现
			getCash(){
				console.log('提现成功')
			},
			// 	去功能模块
			gofun(i){
				let url = this.funlist[i]
				uni.navigateTo({
					url:url
				})
			},
			// 底部设置列表
			goSet(i){
				let url = this.setlist[i]
				if(i === 4){
					uni.switchTab({
						url:url
					})
				}else{
					uni.navigateTo({
						url:url
					})
				}
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.my-layout {
		padding-bottom: 150rpx;
		color: #000000;
	}

	.user-info {
		display: flex;
		align-items: center;
		padding: 20rpx 40rpx;
		background-color: #FFFFFF;
		.user-img {
			width: 120rpx;
			border-radius: 100%;
		}

		.user-vip {
			margin-left: 25rpx;
			.vip-top {
				display: flex;
				align-items: center;
				margin-bottom: 10rpx;
				.user-tel {
					font-size: 36rpx;
					height: 50rpx;
					line-height: 50rpx;
					margin-right: 10rpx;
				}
				.vip-type{
					width: 100rpx;
				}
			}
			.tgm{
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 0 12rpx;
				height: 44rpx;
				line-height: 44rpx;
				font-size: 24rpx;
				color: #FFFFFF;
				background-image: linear-gradient(270deg, #393C4C 0%, #797A83 98%);
				border-radius: 22rpx;
				.tgm-copy{
					width: 26rpx;
				}
			}
		}
	}
	
	.my-earnings{
		background-color: #FFFFFF;
		padding: 0 40rpx 40rpx;
		.earnings-info{
			background: url(../../static/mine/my-bg.png) no-repeat;
			background-size: 100% 100%; 
			color: #FFFFFF;
			.earnings-top{
				color: #FFFFFF;
				font-size: 28rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 22rpx 0 6px 22rpx;
			}
			.get-cash{
				display: flex;
				justify-content: space-between;
				align-items: center;
				background-image: linear-gradient(90deg, rgba(255,255,255,0.44) 0%, rgba(255,255,255,0.10) 100%);
				border-radius: 25px 0 0 25px;
				.cash-left{
					display: flex;
					align-items: center;
					padding: 0 20rpx;
				}
				.cash-icon{
					width: 32rpx;
					margin-right: 15rpx;
				}
				.arror-right{
					width: 36rpx;
				}
			}
			.cash-num{
				padding-left: 22rpx;
				font-size: 54rpx;
				height: 63rpx;
				line-height: 63rpx;
			}
			.earnings-bottom{
				padding: 11rpx 22rpx 46rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.btm-item{
					width: 45%;
					.item-text{
						font-size: 28rpx;
					}
					.item-num{
						font-size: 42rpx;
						width: 100%;
						white-space: pre-wrap;
					}
				}
			}
		}
		.fun-list{
			padding: 40rpx 20rpx 0;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.fun-item{
				text-align: center;
				.fun-icon{
					width: 80rpx;
				}
				.fun-name{
					font-size: 28rpx;
					color: #474F66;
					line-height: 40rpx;
				}
			}
		}
		
	}
	
	.set-list{
		margin-top: 20rpx;
		background-color: #FFFFFF;
		.set-item{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 27rpx 37rpx;
			border-bottom:1px solid #EEEEEE ;
		}
		.item-left{
			position: relative;
			display: flex;
			align-items: center;
			.set-icon{
				width: 44rpx;
			}
			.set-name{
				font-size: 30rpx;
				margin-left: 13rpx;
			}
			.active-flag{
				position: absolute;
				top: 0;
				right: -10px;
				width: 12rpx;
				height: 12rpx;
				border-radius: 100%;
				background-color: #F65358;
			}
		}
		.msg-num{
			font-size: 24rpx;
			color: #F59328;
			vertical-align: top;
		}
		.item-right{
			width: 36rpx;
			height: 36rpx;
		}
	}
	
	.out-btn{
		margin: 60rpx 40rpx;
	}
</style>
